<template>
  <div class="container">
    <div class="nav-bar flex">
      <div :class="{active:type==-2}" @click="toggleType(-2)">全部</div>
      <div :class="{active:type==0}" @click="toggleType(0)">待付款</div>
      <div :class="{active:type==1}" @click="toggleType(1)">待发货</div>
      <div :class="{active:type==2}" @click="toggleType(2)">待收货</div>
      <div :class="{active:type==4}" @click="toggleType(4)">待评价</div>
    </div>
    <div class="nav-bar-before"></div>
    <xd-datalist url="api/user/order_records" ref="datalist" :autoload="false">
      <template slot-scope="scope">
        <div class="list-item" v-for="(group,index) in scope.list" :key="index">
          <div class="p1 border-b">
            <div class="flex">
              <div class="flex-con bill-time">
                {{group.orderNo}}
              </div>
              <div class="order-status" v-if="group.orderStatus==-1">
                已取消
              </div>
            </div>
            <router-link tag="div" :to="{path:'/billdetail',query:{id:group.recordId}}">
              <div v-for="(item,itemIndex) in group.goods" :key="itemIndex" class="list-item-content flex flex-stretch">
                <xd-img :src="item.goodsCover|absUrl" alt="" class="goods-img" />
                <div class="flex-con goods-desc flex-stretch">
                  <div class="goods-title lht1">
                    <div class="flex flex-stretch">
                      <div class="flex-con">
                        {{item.goodsTitle}}
                      </div>
                      <div>
                        <div class="tag" v-if="item.goodsStatus!=-1">
                        {{item.goodsStatus|goodsStatus}}
                      </div>
                      </div>
                      
                    </div>

                  </div>
                  <div class="flex">
                    <div class="flex-con goods-num">
                      × {{item.goodsNum}}
                    </div>
                    <div class="points">
                      <template v-if="item.goodsPoints>0">{{item.goodsPoints}}积分</template>
                      <template v-if="item.goodsPoints >0 && item.goodsPrice > 0 ">+</template>
                      <template v-if="item.goodsPrice>0">{{item.goodsPrice}}元</template>
                    </div>
                  </div>
                  <div class="btns flex mini-btns">
                    <button class="btn ok-btn" v-if="item.goodsStatus==4" @click.stop="showCommentPage(item.itemId)">评论</button>
                    <button class="btn cancel-btn" v-if="item.goodsStatus==2" @click.stop="sureRecieveOrder(item)">确认收货</button>
                  </div>

                </div>

              </div>
            </router-link>
            <div class="text-right sum">
              共{{group.goodsNum}}件商品，合计：
              <span class="sum-points" v-if="group.goodsPoints>0">{{group.goodsPoints}}积分</span>
              <template v-if="group.goodsAmount >0 && group.goodsPoints > 0 ">+</template>
              <span class="sum-money" v-if="group.goodsAmount>0">{{group.goodsAmount|priceFormat}}元</span>
            </div>

          </div>
          <div class="p2 flex" v-if="group.orderStatus<=0">
            <button class="btn cancel-btn" @click.stop="cancelBill(group)" v-if="group.orderStatus==0">取消订单</button>
            <button class="btn ok-btn" v-if="group.orderStatus==0" @click="showPayDialog(group.recordId)">立即支付</button>
            <button class="btn ok-btn" v-if="group.orderStatus==-1" @click="removeOrder(group.recordId)">删除订单</button>
          </div>
        </div>
      </template>
    </xd-datalist>

    <div class="pay-dialog" v-show="isShowDialog" @click="closePayDialog">
      <div class="pay-methods" @click.stop="noop">
        <div class="pay-title">
          支付方式
          <img src="../../assets/icons/bill/closebtn@2x.png" alt="" class="closebtn">
        </div>
        <div class="p30 border-t border-b">
          <div class="flex">
            <img src="../../assets/icons/bill/wxpay@2x.png" alt="" class="wxpay-icon">
            <div class="flex-con">微信支付</div>
            <img src="../../assets/icons/bill/selected@2x.png" alt="" class="selected-icon">
          </div>
        </div>
        <button class="surebtn" @click="doWxpay">确定</button>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      type: 0,
      isShowDialog: false
    };
  },
  filters: {
    priceFormat(price) {
      return Math.round(price * 100) / 100;
    }
  },
  mounted() {
    this.type = this.$route.query.type || -2;
    this.$refs.datalist.addParam("status", this.type).refresh();
  },
  methods: {
    removeOrder(recordId) {
      this.$confirm("确认删除订单吗?").then(action => {
        if (action) {
          this.showLoading();
          this.$post("/api/bill/remove_bill", {
            id: recordId
          })
            .then(res => {
              this.$refs.datalist.removeItem(recordId, "recordId");
              this.$success();
              this.hideLoading();
            })
            .catch(() => {
              this.hideLoading();
            });
        }
      });
    },
    sureRecieveOrder(item) {
      this.$confirm("确认收货吗?").then(action => {
        if (action) {
          this.showLoading();
          this.$post("/api/bill/receiveGoods", {
            itemId: item.itemId
          })
            .then(res => {
              this.$refs.datalist.refresh();
              this.hideLoading();
            })
            .catch(() => {
              this.hideLoading();
            });
        }
      });
    },
    toggleType(type) {
      this.type = type;
      this.$router.replace("/bill?type=" + type);
      this.$refs.datalist.addParam("status", type).refresh();
    },
    cancelBill(item) {
      this.$confirm("确认取消订单吗?").then(action => {
        if (action) {
          this.showLoading();
          this.$post("/api/bill/cancelBill", {
            id: item.recordId
          })
            .then(res => {
              this.$refs.datalist.refresh();
              this.hideLoading();
            })
            .catch(() => {
              this.hideLoading();
            });
        }
      });
    },
    onBridgeReady(info) {
      let that = this;
      WeixinJSBridge.invoke(
        "getBrandWCPayRequest",
        {
          appId: info.appId, //公众号名称，由商户传入
          timeStamp: info.timeStamp, //时间戳，自1970年以来的秒数
          nonceStr: info.nonceStr, //随机串
          package: info.packageValue,
          signType: info.signType, //微信签名方式：
          paySign: info.paySign //微信签名
        },
        function(res) {
          // 使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
          that.closePayDialog();
          if (res.err_msg == "get_brand_wcpay_request:ok") {
            that.$refs.datalist.refresh();
          }
        }
      );
    },
    dopay(data) {
      var vm = this;
      if (typeof WeixinJSBridge == "undefined") {
        //微信浏览器内置对象。参考微信官方文档
        if (document.addEventListener) {
          document.addEventListener(
            "WeixinJSBridgeReady",
            vm.onBridgeReady(data),
            false
          );
        } else if (document.attachEvent) {
          document.attachEvent("WeixinJSBridgeReady", vm.onBridgeReady(data));
          document.attachEvent("onWeixinJSBridgeReady", vm.onBridgeReady(data));
        }
      } else {
        vm.onBridgeReady(data);
      }
    },
    doWxpay() {
      if (this.currentRecordId) {
        this.showLoading();
        this.$post("/api/wx/wxpayForRecord", {
          recordId: this.currentRecordId
        })
          .then(info => {
            this.dopay(info);
            this.hideLoading();
          })
          .catch(_ => {
            this.hideLoading();
          });
      }
    },
    showCommentPage(id) {
      this.$router.push("comment?itemId=" + id);
    },
    showPayDialog(id) {
      this.isShowDialog = true;
      this.currentRecordId = id;
    },
    closePayDialog() {
      this.isShowDialog = false;
    }
  }
};
</script>

<style lang="scss" scoped>
@import "../../styles/nav";
html,
body,
.container {
  background-color: #ebebeb;
}

.tag {
  border: 1px solid #f08c37;
  font-size: 0.32rem;
  line-height: 1;
  border-radius: 1px;
  color: #f08c37;
  padding: 0.1rem 0.1rem;
}
.mini-btns {
  padding-top: 0.3rem;
  justify-content: flex-end;
}

.list-item-content {
  padding: 0.2667rem 0 0.36rem 0;
}

.bill-time {
  font-size: 0.2933rem;
  color: #999999;
}

.p2 {
  justify-content: flex-end;
  padding: 0.3rem 0.4rem;
}

.bill-status {
  color: #f08c37;
  font-size: 0.32rem;
}

.list-item {
  margin-bottom: 0.32rem;
  background-color: #fff;
}

.btn {
  text-align: center;
  padding: 0.05rem 0.3rem;
  box-sizing: border-box;
  border-radius: 0.1467rem;
  background-color: transparent;
  border: solid 0.0267rem #71b986;
  font-size: 0.3733rem;
  margin-left: 0.32rem;
}

.cancel-btn {
  color: rgba(52, 163, 89, 0.79);
}

.ok-btn {
  color: #ff2a2a;
  border-color: #ff2a2a;
}

.order-status {
  color: #ff2a2a;

  font-size: 0.3rem;
}

.sum {
  font-size: 0.32rem;
  color: #333;
}

.goods-title {
  font-size: 0.3467rem;
  color: #17402a;
  padding-bottom: 0.4rem;
}

.sum-points {
  color: #ff2a2a;
  font-size: 0.3733rem;
}

.sum-money {
  font-size: 0.3733rem;
  color: #005a1a;
}

.goods-num {
  font-size: 0.32rem;
  color: rgba(23, 64, 42, 0.65);
}

.points {
  color: rgba(23, 64, 42, 0.65);
  font-size: 0.32rem;
}

.p1 {
  padding: 0.4rem;
}

.goods-img {
  width: 2.64rem;
  height: 1.6933rem;
}

.goods-desc {
  padding-left: 0.3333rem;
}

.pay-dialog {
  position: fixed;
  z-index: 100;
  background-color: rgba(0, 0, 0, 0.36);
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
}

.pay-methods {
  // height: 5.6267rem;
  background-color: #ffffff;
  font-size: 0.4267rem;
  color: #333;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

.pay-title {
  padding: 0.4533rem 0 0.4rem 0;
  font-size: 0.4267rem;
  color: #222222;
  position: relative;
  text-align: center;
  .closebtn {
    width: 0.5067rem;
    height: 0.5067rem;
    position: absolute;
    right: 0.3867rem;
    top: 0.3867rem;
  }
}

.selected-icon {
  width: 0.44rem;
  height: 0.44rem;
}

.wxpay-icon {
  width: 0.92rem;
  height: 0.92rem;
  margin-right: 0.3733rem;
}

.surebtn {
  height: 1.1467rem;
  line-height: 1.1467rem;
  background-color: #ff2a2a;
  display: block;
  width: 100%;
  border: none;
  font-size: 0.4267rem;
  color: #fff;
  margin-top: 1.48rem;
}
</style>
